import React from 'react'
import {
  View,
  StyleSheet,
  Image,
  TouchableOpacity,
} from 'react-native'
// import PropTypes from 'prop-types'
import Swiper from 'react-native-swiper'
import CommonStyle from '../appWeb/common/styles/CommonStyle'
import CommonColor from '../appWeb/common/styles/CommonColor'
import * as ImageMap from '../appWeb/common/Images/BundleImageMap'

const guideImage1 = ImageMap.guideView1
const guideImage2 = ImageMap.guideView2
const guideImage3 = ImageMap.guideView3
const guideImage4 = ImageMap.guideView4

class AppIntro extends React.Component {
  // constructor(props) {
  //   super(props)
  // }

  // static propTypes = {
  //   onPress: PropTypes.func,
  // }

  render() {
    // const btn = (
    //   <View
    //     style={{
    //       marginBottom: 300,
    //       backgroundColor: CommonColor.TextRed,
    //       height: 50,
    //       width: 50,
    //     }}
    //   />
    // )
    return (
      <View style={styles.container}>
        <Swiper
          style={styles.wrapper}
          // paginationStyle={{marginBottom: 50}}
          dotStyle={{ backgroundColor: CommonColor.White }}
          activeDotStyle={{ backgroundColor: '#FFD558' }}
          loop={false}
        >
          <Image style={styles.image} source={guideImage1} />
          <Image style={styles.image} source={guideImage2} />
          <Image style={styles.image} source={guideImage3} />
          <TouchableOpacity
            style={styles.container}
            activeOpacity={0.5}
            onPress={() => {
              this.props.onPress()
            }}
          >
            <Image style={styles.image} source={guideImage4} />
          </TouchableOpacity>
        </Swiper>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: CommonColor.White,
  },
  btnContainer: {
    width: 250,
    height: 50,
    marginTop: CommonStyle.WindowHeight - 183,
    marginLeft: (CommonStyle.WindowWidth - 250) / 2,
  },
  wrapper: {
    // marginTop:0,
    // width: CommonStyle.WindowWidth*4,
    // height: CommonStyle.WindowHeight,
  },
  image: {
    flex: 1,
    width: CommonStyle.WindowWidth,
    height: CommonStyle.WindowHeight,
    justifyContent: 'center',
    alignItems: 'center',
  },
})

export default AppIntro
